<template>
    <div class="layout">
        <!-- 顶部标签 -->
        <app-header class="head">
            <template v-slot:head-title>
                <span>社区</span>
            </template>
        </app-header>

        <!-- 主要内容 -->
        <div class="main">
            <!-- 顶部 -->
            <div class="main-top">
                <input type="text" placeholder="说说你的看法"
                    v-if="!isClick"
                    @click="write">
                <textarea
                    v-show="isClick"
                    v-model="postsVal"
                    @keyup.enter="submit"></textarea>
                <div class="submit"
                    @click="submit">发表</div>
                <div class="cancel"
                    @click="close"
                    v-if="isClick">取消</div>
            </div>
            <!-- 帖子 -->
            <div class="posts">
                <ul>
                    <li v-for="(item, index) in res" :key="index">
                        <div class="user">
                            <div class="user-avatar">
                                <img :src="item.avatar">
                            </div>
                            <div class="user-info">
                                <span>{{item.user}}</span>
                            </div>
                        </div>
                        <div class="content">
                            <p class="describe">
                                {{item.desc}}
                            </p>
                            <div class="view-box">
                                <ol>
                                    <li v-for="(item2, index2) in res[index].pic" :key="index2">
                                        <img :src="item2">
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>

        <!-- 底部标签 -->
        <footer>
            <div class="foot">
                <p>我的底线就到这了哇~</p>
            </div>
        </footer>
    </div>
</template>

<script>
import appHeader from '@/components/app-header.vue'
import {postsArray} from '@/assets/data/posts.js'

export default {
    name: "Community",
    components: {
        appHeader,
    },
    data() {
        return {
            arr: postsArray,
            res: [],
            isClick: false,
            user: "",
            postsVal: ""
        }
    },
    methods: {
        write() {
            this.isClick = true;
        },
        close() {
            this.isClick = false;
            this.postsVal = "";
        },
        submit() {
            let obj = {}
            obj.user = "大聪明刘彬";
            obj.avatar = require("../assets/user/personal.png");
            obj.desc = this.postsVal;
            this.res.unshift(obj);
            // 缓存数据
            localStorage.setItem("user", this.res)
            // 发表后初始化
            this.postsVal = "";
            this.isClick = false;
        }
    },
    created() {
        this.user = localStorage.getItem('userInfo')
        this.arr.forEach(item => {
            this.res.push(item)
        })
    }
}
</script>

<style lang="scss" scoped>
.layout {
    width: 100%;
    overflow: hidden;
    background-color: #2E2E2E;
    .main {
        width: 100%;
        margin-top: 80px;
        // 顶部
        .main-top {
            width: 100%;
            // height: 60px;
            padding-bottom: 15px;
            background-color: #171717;
            color: white;
            display: flex;
            justify-content: center;
            position: relative;
            input {
                width: 70%;
                height: 40px;
                font-size: 20px;
                border-radius: 5px;
                margin-right: 10px;
                padding-left: 20px;
                box-sizing: border-box;
                background-color: #494D57;
                &::placeholder {
                    color: white;
                }
            }
            textarea {
                width: 70%;
                height: 150px;
                margin-right: 10px;
                border-radius: 5px;
                font-size: 20px;
                background-color: #494D57;
                color: white;
                transition: .5;
            }
            div {
                height: 25px;
                padding: 8px 10px;
                border-radius: 5px;
                font-size: 18px;
                background-color: #494D57;
            }
            .cancel {
                position: absolute;
                top: 50px;
                right: 26px;
            }
        }
        // 帖子
        .posts {
            width: 100%;
            >ul {
                width: 100%;
                box-sizing: border-box;
                padding: 15px 15px 0 15px;
                >li {
                    width: 100%;
                    padding: 15px 15px;
                    box-sizing: border-box;
                    border-radius: 10px;
                    background-color: #111;
                    color: #fff;
                    margin-bottom: 15px;
                    // 用户信息
                    .user {
                        height: 40px;
                        display: flex;
                        margin-bottom: 15px;
                        // 用户头像
                        .user-avatar {
                            margin-right: 15px;
                            img {
                                width: 40px;
                                height: 40px;
                                border-radius: 5px;
                                overflow: hidden;
                            }
                        }
                        // 用户名
                        .user-info {
                            height: 40px;
                            span {
                                font-size: 16px;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                        }
                    }
                    // 发表内容
                    .content {
                        .describe {
                            margin-bottom: 15px;
                        }
                        // 图片
                        .view-box {
                            width: 100%;
                            ol {
                                display: flex;
                                justify-content: flex-start;
                                flex-wrap: wrap;
                                li {
                                    width: 100px;
                                    height: 100px;
                                    margin-right: 7.6px;
                                    margin-bottom: 7.6px;
                                    border: 1px solid #494D57;
                                    box-sizing: border-box;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                        object-fit: cover;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    footer {
        width: 100%;
        height: 160px;
        padding-top: 30px;
        box-sizing: border-box;
        .foot {
            height: 50px;
            line-height: 50px;
            background-color: black;
            color: #999;
            display: flex;
            justify-content: center;
            align-items: baseline;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
</style>
